1"use client";
2
3import { useActionState, useState } from "react";
4import { useAuthBlocker } from "@/(main)/providers/auth-blocker-provider";
5import { type CreateAnswerActionResult, createAnswerAction } from "@/actions";
6import { Button } from "@/ui/button";
7
8export function AnswerForm({
9  owner,
10  repo,
11  number,
12}: {
13  owner: string;
14  repo: string;
15  number: number;
16}) {
17  const { requireAuth } = useAuthBlocker();
18  const [body, setBody] = useState("");
19
20  const createAnswer = createAnswerAction.bind(null, owner, repo, number);
21  const [state, formAction, isPending] = useActionState(
22    async (_prevState: CreateAnswerActionResult | null, formData: FormData) => {
23      if (requireAuth()) return null;
24      return await createAnswer(formData);
25    },
26    null,
27  );
28
29  const isValid = body.trim() !== "";
30
31  return (
32    <div>
33      <form action={formAction}>
34        <div className="relative">
35          <textarea
36            name="body"
37            value={body}
38            onChange={(e) => setBody(e.target.value)}
39            className="w-full h-48 p-2 border border-b-border border-r-border border-t-transparent border-l-transparent rounded-xs resize-none text-sm focus:outline-none focus:border-black transition-colors duration-200"
40            placeholder="Write your answer..."
41            disabled={isPending}
42          />
43          <div className="absolute bottom-1.5 right-0">
44            <Button
45              type="submit"
46              disabled={!isValid || isPending}
47              className="rounded-none"
48            >
49              {isPending ? "Submitting..." : "Submit"}
50            </Button>
51          </div>
52        </div>
53        {state && "error" in state && (
54          <p className="text-xs text-red-500 mt-1">{state.error}</p>
55        )}
56      </form>
57    </div>
58  );
59}
60